frame#

The frame property defines the size and alignment of a view. You can specify it in one of two formats:

1. Fixed Width and Height#

1frame?: {
2  width?: number
3  height?: number
4  alignment?: Alignment
5}

This format allows you to specify a fixed width and/or height for the view, as well as how it is aligned within that frame.

Example#

1<VStack
2  frame={{
3    width: 100,
4    height: 100,
5    alignment: 'center'
6  }}
7>
8  <Text>Fixed size</Text>
9</VStack>

2. Flexible Frame Constraints#

1frame?: {
2  alignment?: Alignment
3  minWidth?: number
4  minHeight?: number
5  maxWidth?: number | 'infinity'
6  maxHeight?: number | 'infinity'
7  idealWidth?: number | 'infinity'
8  idealHeight?: number | 'infinity'
9}

This format gives more control over layout by specifying minimum, maximum, and ideal dimensions for the frame. These values can be numeric or 'infinity', which instructs the view to expand to fill available space.

Example#

1<HStack
2  frame={{
3    minWidth: 100,
4    maxWidth: 'infinity',
5    minHeight: 50,
6    idealHeight: 100,
7    alignment: 'leading'
8  }}
9>
10  <Text>Expandable width</Text>
11</HStack>

Alignment#

The alignment property determines how the view is positioned within the frame. Common alignment values include:

• 'center'
• 'top'
• 'bottom'
• 'leading'
• 'trailing'
• 'topLeading'
• 'topTrailing'
• 'bottomLeading'
• 'bottomTrailing'

Note: Alignment only affects layout when the frame size exceeds the view’s natural size.

Example#

1<Text
2  frame={{
3    width: 200,
4    height: 100,
5    alignment: 'bottomTrailing'
6  }}
7>
8  Aligned Text
9</Text>

Best Practices#

• Use the fixed width and height format when you want precise dimensions.
• Use the flexible format with min / max / ideal values when working with responsive layouts.
• Avoid specifying both width/height and minWidth/maxWidth, etc., in the same frame object — choose one format to avoid conflicts.

Summary#

The frame property in CommonViewProps allows fine-grained control over layout sizing and alignment, closely mirroring SwiftUI’s native frame modifier. Use it to design clean and adaptable interfaces across different screen sizes.